<template>
  <div class="download">
    <!-- <a href="https://nodejs.org/dist/v22.12.0/node-v22.12.0-x64.msi
">nodejs</a> -->
    <img class="deco1" src="../../assets/download/5.png" alt="" />
    <img class="deco2" src="../../assets/download/4.png" alt="" />
    <img class="logo" src="../../assets/download/3.png" alt="" />
    <div v-if="info" class="content">
      <div class="tit">
        {{ info.introduce }}
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :key="item.id"
          v-for="item in list"
          :label="item.name"
          :name="item.id"
        ></el-tab-pane>
      </el-tabs>
      <ul class="ul" v-if="infoList.length">
        <li :key="index" v-for="(item, index) in infoList">
          <div class="li">
            <div>{{ item.productName }}</div>
            <div class="handle">
              <div v-if="item.pdfUrl">
                <!-- <div @click="downFn(item.pdfOssId)" v-if="item.pdfUrl"> -->
                <!-- <img src="../../assets/download/1.png" alt="" />
                PDF下载 -->

                <!-- <a
                  href="javascript:void(0);"
                  @click="downLoad(item.pdfUrl, item.productName)"
                  style="
                    display: flex;
                    align-items: center;
                    color: #fff;
                    text-decoration: none;
                  "
                >
                  <img src="../../assets/download/1.png" alt="" />
                  <span>PDF下载</span>
                </a> -->

                <a
                  target="_blank"
                  :href="item.pdfUrl"
                  style="
                    display: flex;
                    align-items: center;
                    color: #fff;
                    text-decoration: none;
                  "
                >
                  <img src="../../assets/download/1.png" alt="" />
                  <span>PDF下载</span>
                </a>
              </div>
              <div v-if="item.threedUrl">
                <!-- <a
                  href="javascript:void(0);"
                  @click="downLoad(item.threedUrl, item.productName)"
                  style="
                    display: flex;
                    align-items: center;
                    color: #fff;
                    text-decoration: none;
                  "
                >
                  <img src="../../assets/download/2.png" alt="" />3D模型下载
                </a> -->

                <a
                  :href="item.threedUrl"
                  style="
                    display: flex;
                    align-items: center;
                    color: #fff;
                    text-decoration: none;
                  "
                >
                  <img src="../../assets/download/2.png" alt="" />3D模型下载
                </a>

              </div>
              <div
                @click="lookMore(item)"
                class="btns"
                slot="reference"
                style="display: flex; align-item: center"
              >
                <img src="../../assets/download/6.png" alt="" /> 辅助资料下载
              </div>
            </div>
          </div>
          <div v-if="item.flag" class="detail">
            <ul :key="index" class="ul1" v-for="(item1, index) in gujian">
              <li>{{ index + 1 }}. {{ item1.modelType }}</li>
              <li>{{ item1.versionNo }}</li>
              <li>{{ item1.updateTime }}</li>
             
              <li>
               
                <!-- <a
                  style="
                    display: flex;
                    align-items: center;
                    color: #fff;
                    text-decoration: none;
                  "
                  href="javascript:void(0);"
                  @click="downLoad(item1.fileUrl, item1.modelType)"
                >
                  <span>固件下载</span><i class="el-icon-bottom"></i>
                </a> -->

                <a
                  style="
                    display: flex;
                    align-items: center;
                    color: #fff;
                    text-decoration: none;
                  "
                  :href="item1.fileUrl"
                >
                  <span>固件下载</span><i class="el-icon-bottom"></i>
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>

      <el-empty v-else description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
import "../../utils/vdown";
import {
  getnavigationList,
  downloadcenter,
  getproductfirmware,
} from "../../apis/index";
export default {
  name: "download",
  components: {},
  data() {
    return {
      gujian: [],
      infoList: [],
      info: null,
      activeName: "0",
      list: [],
      curCate: "",
    };
  },
  computed: {},
  created() {
    getnavigationList()
      .then((res) => {
        this.list = res.data.data.map((item, index) => {
          return {
            name: item.nameType,
          };
        });

        this.curCate = this.list[0]?.name;
        console.log(this.curCate);

        this.getList();
        // console.log( this.list,999999)
      })

      .catch(() => {});
  },
  methods: {
    downLoad(urls, name) {
      fetch(urls)
        .then((res) => res.blob())
        .then((blob) => {
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          // 下载文件的名称及文件类型后缀
          link.download = name;
          document.body.appendChild(link);
          link.click();
          //在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        });

      // const x = new window.XMLHttpRequest();
      // x.open("GET", urls, true);
      // x.responseType = "blob";
      // x.onload = () => {
      //   const url = window.URL.createObjectURL(x.response);
      //   const a = document.createElement("a");
      //   a.href = url;
      //   a.target = "_blank";
      //   a.download = name + urls.match(/\.([^\.]+)$/)[0];
      //   a.style.display = "none";
      //   document.body.append(a);
      //   a.click();
      // };
      // x.send();
    },
    downFn(info) {
      console.log(info, 999999999);
      this.$download.oss(info);

      // this.download(`system/oss/download/${ossid}`, {
      // }, `${name}.xlsx`)
    },
    downLoadFile(url) {
      let fileName = url.slice(url.lastIndexOf("/") + 1); // 这里是通过从后端获取到的 url  地址中截出来原本的文件名
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          // 下载文件的名称及文件类型后缀
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          //在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        });
    },
    lookMore(item) {
      console.log(item);

      if (item.flag) {
        this.infoList?.map((r) => {
          r.flag = false;
        });
      } else {
        this.infoList?.map((r) => {
          r.flag = false;
        });
        item.flag = true;
        getproductfirmware({ id: item.id })
          .then((res) => {
            this.gujian = res.data.data;

            console.log(res.data.data, 3333333333388888);
          })
          .catch(() => {});
      }
    },
    getList() {
      downloadcenter({ nameType: this.curCate })
        .then((res) => {
          this.info = res.data.data;

          this.infoList = res.data.data.productVoList?.map((r) => {
            return {
              ...r,
              flag: false,
            };
          });
          console.log(this.infoList, 22222222288888);
        })
        .catch(() => {});
    },
    handleClick(tab, event) {
      console.log(tab, event);

      this.curCate = this.list[this.activeName]?.name;
      this.getList();
    },
  },
};
</script>
<style>
.popperOptions[x-placement^="left"] .popper__arrow::after {
  border-left-color: #25a2ab;
}
.popperOptions[x-placement^="right"] .popper__arrow::after {
  border-right-color: #25a2ab;
}
.popperOptions[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #25a2ab;
}
.popperOptions[x-placement^="top"] .popper__arrow::after {
  border-top-color: #25a2ab;
}
.popperOptions {
  background-color: #ea4e3d;
  color: #ffffff;
  border-radius: 5px;
  padding: 0;
  border: #ea4e3d;
}
</style>

<style lang="scss" scoped>
.detail {
  border-top: 2px solid #25a2ab;
  .ul1 {
    display: flex;
    color: #25a2ab;
    border-bottom: 2px solid #323232;
    li {
      cursor: pointer;
      // font-weight: 700;
      padding: 10px 0;
      font-size: 14px;
      list-style-type: none;
      border-bottom: none;

      // flex: 1;
      display: flex;
      align-items: center;
      margin-right: 15px;
      &:last-child {
        margin-right: 0;
      }
      &:nth-child(1) {
        flex: 1;
      }
      &:nth-child(2) {
        width: 200px;
        text-align: center;
      }
      &:nth-child(3) {
        width: 225px;
        text-align: center;
      }
      &:nth-child(4) {
        width: 105px;
        text-align: center;
      }
    }
  }
}
.poptop {
  width: 380px;
  height: 47px;
  border-radius: 5px 5px 0 0;
  background: #25a2ab;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 18px;
  padding-left: 20px;
}
.contents {
  width: 100%;
  padding: 20px 0 30px;
  background: #fff;
  color: #323232;
  font-size: 16px;
  border-radius: 0 0 5px 5px;
  > div {
    padding: 0 20px;
    margin-bottom: 10px;
    width: 360px;
    &::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #424242;
      margin-right: 8px;
    }
  }
}
// .btnGroups{
//   padding-right: 20px;
//   width: 380px;
//   border-radius: 0 0 5px 5px;
//   height:25px;
// }
.btns {
  display: flex;
  align-items: center;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}
::v-deep .el-tabs__active-bar {
  height: 0;
}
::v-deep .el-tabs__item.is-active {
  color: #25a2ab;
}
::v-deep .el-tabs__item {
  font-weight: bold;
  color: #2c2c2c;
  font-size: 17px;
  &:hover {
    color: #25a2ab;
  }
}
.download {
  background: #f5f5f5;
  overflow: hidden;
  position: relative;
  .deco1 {
    position: absolute;
    top: 0;
    width: 160px;
    right: 0;
    display: block;
    height: auto;
  }
  .deco2 {
    position: absolute;
    width: 600px;
    left: 0;
    top: 30%;
    display: block;
    // height: 1500px;
  }

  .ul {
    margin: 0 0 50px 0;
    padding: 0;
    border-radius: 5px;
    background: #323232;
    position: relative;
    z-index: 9;
    padding: 20px 30px 0;
    > li {
      list-style-type: none;
      border-bottom: 2px solid #25a2ab;
      &:last-child {
        border-bottom: none;
      }
      > .li {
        padding: 15px 20px;

        &:last-child {
          border-bottom: none;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ffffff;
        .handle {
          cursor: pointer;
          display: flex;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            img {
              margin-right: 10px;
              width: 30px;
              display: block;
            }
            &:nth-child(2) {
              margin: 0 36px;
            }
          }
        }
      }
    }
  }
  padding-top: 100px;
  .logo {
    display: block;
    margin: 0 auto 60px;
  }
  .content {
    width: 1420px;
    margin: 0 auto;
    .tit {
      color: #323232;
      font-size: 14px;
      line-height: 30px;
      margin-bottom: 50px;
    }
  }
}
</style>